<template>
  <div class="disc-bg" @mouseenter="isHover = true" @mouseleave="isHover = false">
    <div class="disc">
      <div
        v-for="(item, index) in modelValue?.data"
        :key="index"
        class="disc__camp"
        :class="{
          show: focusIndex === index && IF_VS_1130 === true
        }"
      >
        <div class="disc__camp__logo" @click="showContent(index, item)">
          <img class="logo" :src="item.imgSrc" :alt="item.alt" />
          <div
            class="disc__camp__logo__show-btn"
            :class="{ 'd-none': focusIndex === index && IF_VS_1130 === true }"
          >
            <img
              src="/src/assets/icon-plus-darkblue.svg"
              alt="了解更多"
            />
          </div>
        </div>

        <div class="disc__camp__content">
          <img
            @click="hiddenContent()"
            class="camp-cross"
            src="/src/assets/icon-cross.svg"
            alt="关闭"
          />
          <p class="camp-title">{{ item.title }}</p>
          <p class="camp-des">{{ item.des }}</p>
          <Button
            v-if="item.link"
            type="link"
            :data="{
              text: '了解更多',
              url: item.link,
            }"
            @handleClick="handleClick"
          />
        </div>
      </div>

      <div class="disc__link" v-if="modelValue?.link?.text || modelValue?.link?.url">
        <Button
          type="link"
          :data="modelValue?.link"
          @handleClick="handleClick"
        />
      </div>

      <div class="disc__mid">
        <img src="https://ywies-tx.cedim.cn/_nuxt/img/logo-ycyw.0a99fd4.png" alt="YCYW" />
      </div>
    </div>

    <div class="disc__mask" v-if="focusData.id - 1 === focusIndex">
      <div class="disc__mask__bg" @click="hiddenContent"></div>

      <div
        class="disc__campMid"
        v-if="focusData.id - 1 === focusIndex && IF_VS_1130 === false"
      >
        <div class="disc__campMid__content">
          <img
            class="camp-logo camp-logo-desktop"
            :src="focusData.imgSrc"
            :alt="focusData.alt"
          />
          <div>
            <div class="d-flex">
              <div class="camp-title-mobile">
                <img
                  class="camp-logo camp-logo-mobile"
                  :src="focusData.imgSrc"
                  :alt="focusData.alt"
                />
                <p class="camp-title">{{ focusData.title }}</p>
              </div>

              <img
                @click="hiddenContent"
                class="camp-cross"
                src="/src/assets/icon-cross.svg"
                alt="关闭"
              />
            </div>

            <p class="camp-des my-2">{{ focusData.des }}</p>
            <Button
              v-if="focusData.link"
              type="link"
              :data="{
                text: '了解更多',
                url: focusData.link,
              }"
              @handleClick="handleClick"
            />
          </div>
        </div>
      </div>
    </div>

    <Operate v-if="!isPreview" v-model:show="isHover" @handle-edit="showSetting = true" @handle-delete="handleDelete" @handle-copy="handleCopy" @handle-paste="handlePaste"></Operate>
  </div>

  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { randomString } from '@/utils/common'
import Button from '@/common/Button/index.vue'
import Setting from './setting.vue'
import Operate from '@/common/Operate/index.vue'

// 定义组件名称
defineOptions({
  name: 'Disc'
})

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  },
  isPreview: {
    type: Boolean,
    default: true
  },
})

const emit = defineEmits(['update:modelValue', 'handleDelete', 'handleCopy', 'handlePaste', 'handleClick'])

const handleInit = () => {
  if (props.modelValue && props.modelValue.data) return // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: 'Disc',
    data: [
      {
        id: randomString(),
        title: '耀华国际教育学校',
        des: '耀华国际教育学校浙江桐乡校区成立于 2017 年，先进的校园设施确保学 生在安全友好的环境中学习。学校坐落于高桥镇，提供从幼儿阶段至高中 阶段 (K2 至13 年级) 的教育服务，招收2 岁至18 岁本地和外籍学生。',
        imgSrc: 'https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001.jpg',
        alt: '耀华国际教育学校',
        link: 'http://baidu.com',
      },
      {
        id: randomString(),
        title: '耀华国际教育学校',
        des: '耀华国际教育学校浙江桐乡校区成立于 2017 年，先进的校园设施确保学 生在安全友好的环境中学习。学校坐落于高桥镇，提供从幼儿阶段至高中 阶段 (K2 至13 年级) 的教育服务，招收2 岁至18 岁本地和外籍学生。',
        imgSrc: 'https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/campus-life/school-facilities/00_yard%2001.jpg',
        alt: '耀华国际教育学校',
        link: 'http://baidu.com',
      }
    ],
    link: {
      id: randomString(),
      text: '耀华国际教育学校',
      url: 'http://baidu.com',
    }
  }
  emit('update:modelValue', data)
} 

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);

const handleDelete = () => {
  emit('handleDelete', props.modelValue.id)
}

const handleCopy = () => {
  emit('handleCopy', props.modelValue)
}

const handlePaste = (type: string) => {
  emit('handlePaste', type)
}

const handleClick = (url: string) => {
  emit('handleClick', url)
}

handleInit()

const focusIndex = ref<number | null>(null)
const focusData = ref<any>({})
const screenWidth = ref<number>(typeof window !== 'undefined' ? window.innerWidth : 1024)

const IF_VS_1130 = computed(() => {
  return screenWidth.value >= 1024
})

const callBodyScrollHandler = (enable: boolean) => {
  if (typeof window === 'undefined') return
  try {
    const handler = (window as any).$_bodyScrollHandler || (window as any).$bodyScrollHandler
    if (typeof handler === 'function') {
      handler(enable)
    }
  } catch (e) {
    // ignore
  }
}

const showContent = (index: number, item: any) => {
  focusIndex.value = index
  focusData.value = item || {}
  if (screenWidth.value <= 768) {
    callBodyScrollHandler(true)
  }
}

const hiddenContent = () => {
  focusIndex.value = null
  focusData.value = {}
  if (screenWidth.value <= 768) {
    callBodyScrollHandler(false)
  }
}

const handleResize = () => {
  if (typeof window !== 'undefined') {
    screenWidth.value = window.innerWidth
  }
}

onMounted(() => {
  if (typeof window !== 'undefined') {
    screenWidth.value = window.innerWidth
    window.addEventListener('resize', handleResize)
  }
})

onBeforeUnmount(() => {
  if (typeof window !== 'undefined') {
    window.removeEventListener('resize', handleResize)
  }
})
</script>

<style lang="scss" scoped>
.disc-bg {
  background-image: url('https://ywies-tx.cedim.cn/_nuxt/img/disc-bg.0a80aee.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 600px;
}

.disc-bg::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 30, 96, 50%);
}

@media (max-width: 1023.98px) {
  .disc-bg {
    height: 500px;
  }
}

.camp-title-mobile {
  display: flex;
  align-items: center;
}
.camp-title-mobile .camp-logo-mobile {
  display: none;
  height: 46.5px;
}
@media (max-width: 767.98px) {
  .camp-title-mobile .camp-logo-mobile {
    display: block;
  }
}
@media (max-width: 459.98px) {
  .camp-title-mobile .camp-logo-mobile {
    height: 36px;
  }
}

@media (max-width: 767.98px) {
  .camp-logo-desktop {
    display: none;
  }
}

.camp-cross {
  margin-left: auto;
  display: block;
  cursor: pointer;
  height: fit-content;
}

.camp-logo {
  height: 110px;
  margin-right: 24px;
}
@media (max-width: 767.98px) {
  .camp-logo {
    margin-right: 8px;
  }
}

.camp-des {
  color: #64788F;
  margin: 8px 0;
}

.show {
  display: flex !important;
  align-items: center;
  transform: translate(-70px, calc(-50% + 4px)) !important;
  background-color: #fff;
  padding: 16px 24px 25px !important;
  z-index: 10;
  box-shadow: 0px 8px 32px rgba(130, 130, 140, 0.24);
  border-radius: 8px;
}
.show .disc__camp__content {
  display: block;
  width: 310px;
  margin-left: 24px;
}
.show .disc__camp__logo {
  cursor: default;
  opacity: 1 !important;
}

.mobileMask {
  background-color: #1a1c2020;
  position: fixed;
  z-index: 1000;
}

.disc {
  border-radius: 50%;
  background-color: #f7f7fac7;
  position: relative;
  height: 542.5px;
  width: 542.5px;
  min-width: 542.5px;
}
@media (max-width: 1023.98px) {
  .disc {
    height: 391px;
    width: 391px;
    min-width: 391px;
  }
}


@media (max-width: 767.98px) {
  .disc__mask {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1000;
    top: 0;
  }
}
.disc__mask__bg {
  width: 100%;
  height: 100%;
  background-color: rgba(26, 28, 32, 0.6);
}

.disc__campMid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  box-shadow: 0px 8px 32px rgba(130, 130, 140, 0.24);
  border-radius: 8px;
  padding: 16px 24px 25px;
  max-width: 444px;
  width: calc(100% - 24px);
}
@media (max-width: 767.98px) {
  .disc__campMid {
    padding: 12px;
  }
}

.disc__campMid__content {
  display: flex;
  align-items: center;
}

.disc__link {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.disc__link ::v-deep .circle-link button {
  flex-direction: column;
}
.disc__link ::v-deep .circle-link button div {
  margin-bottom: 8px;
  white-space: normal;
}

.disc__mid {
  background-color: #fff;
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 198.4px;
  height: 198.4px;
}
@media (max-width: 1023.98px) {
  .disc__mid {
    width: 143px;
    height: 143px;
  }
}
.disc__mid img {
  width: 108.5px;
}
@media (max-width: 1023.98px) {
  .disc__mid img {
    width: 78px;
  }
}

.disc__camp {
  position: absolute;
  transform: translate(-50%, -50%);
  transform-origin: left;
  padding-right: 4px;
  transition: all 0.8s;
}

.disc__camp__content {
  display: none;
}

.disc__camp__logo {
  cursor: pointer;
  position: relative;
  transition: opacity .3s ease-in-out;
}
.disc__camp__logo:hover,
.disc__camp__logo:active {
  opacity: .5;
}

.disc__camp .logo {
  height: 95px;
}
@media (max-width: 1023.98px) {
  .disc__camp .logo {
    height: 70px;
  }
}

.disc__camp__logo__show-btn {
  display: flex;
  position: absolute;
  bottom: 86%;
  left: 87%;
}
@media (max-width: 1023.98px) {
  .disc__camp__logo__show-btn {
    bottom: 80%;
    left: 85%;
  }
}
.disc__camp__logo__show-btn img {
  @media (max-width: 1023.98px) {
    width: 11px;
    height: 11px;
  }
}

/* position for each camp (explicit class selectors instead of nesting with &) */
.disc__camp:first-child {
  top: 72.5%;
  left: 25%;
}
.disc__camp:nth-child(2) {
  top: 52.5%;
  left: 17.5%;
}
.disc__camp:nth-child(3) {
  top: 32.5%;
  left: 20%;
}
.disc__camp:nth-child(4) {
  top: 17.5%;
  left: 37.5%;
}
.disc__camp:nth-child(5) {
  top: 17.5%;
  left: 62.5%;
}
.disc__camp:nth-child(6) {
  top: 32.5%;
  left: 80%;
}
.disc__camp:nth-child(6) .disc__camp__content {
  width: 310px;
}
@media (max-width: 1280px) {
  .disc__camp:nth-child(6) .disc__camp__content {
    width: 290px;
  }
}
@media (max-width: 1023.98px) {
  .disc__camp:nth-child(6) .disc__camp__content {
    width: 310px;
  }
}
.disc__camp:nth-child(7) {
  top: 52.5%;
  left: 82.5%;
}
@media (max-width: 1280px) {
  .disc__camp:nth-child(7) .disc__camp__content {
    width: 273px;
  }
}
@media (max-width: 1023.98px) {
  .disc__camp:nth-child(7) .disc__camp__content {
    width: 310px;
  }
}
.disc__camp:nth-child(8) {
  top: 72.5%;
  left: 75%;
}
</style>